<template>
  <div class="px-1">
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(configGroup, index) in configs"
        :title="configGroup.name"
        :name="index"
        :key="configGroup.name"
      >
        <div class="px-3">
          <GRSForm
            v-if="activeNames.includes(index)"
            :formModel="configGroup.configs"
            v-model="defaultValue"
          />
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
import GRSForm from "./form.vue";
import { ref, watch, onMounted } from "vue";
import { useStore } from "@/store/index";
import { screenGlobalConfig } from "@/config/index";

const activeNames = ref<number[]>([0]);

const store = useStore();

let defaultValue = {};

const configs = ref<configGroup[]>([]);

onMounted(() => {
  configs.value = screenGlobalConfig.baseInfo;
  defaultValue = store.screenConfig;
});

watch(
  () => store.uuid,
  (value) => {
    if (value) {
      const widgetConfig = store.widgetList.filter(
        (item: widgetConfig) => item.uuid === value
      );
      if (widgetConfig.length > 0) {
        configs.value = widgetConfig[0].baseInfo;
      }
      if (store.widgetConfig[value]) {
        defaultValue = store.widgetConfig[value];
      }
    } else if (!value) {
      configs.value = screenGlobalConfig.baseInfo;
      defaultValue = store.screenConfig;
    }
    console.log("set form data finish");
  }
);

watch(
  () => configs.value,
  () => {
    activeNames.value = [0];
  }
);
</script>
